<template>
  <div class="header" :style="{ 'width': iscop }">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <div class="left-box" style="width:550px;display: flex; align-items: center;">
      <el-button @click="iscollspse()" class="el-icon-menu" plain size="mini" style="margin-left:10px;"></el-button>
      <!-- <h1>首页</h1> -->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 13px;">
        <el-breadcrumb-item v-for="(item, index) in tags" :key="index" :to="{ path: item.path }"
          @click.native="handleclose(index)">{{ item.label }}</el-breadcrumb-item>

      </el-breadcrumb>
    </div>


    <div class="right-box">
      <el-dropdown>
        <img src="../../src/assets/img/OIP-C.jpg" height="50px" width="50px" style="
        border-radius:50%;margin-top: 5px;">
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>登录</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>

        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      isCollapse: true,
    }
  },
  methods: {

    logout() {
       this.$store.commit('clearMenu')
        this.$store.commit('clearToken')
        this.$router.push({
          name:"login",
          query:{ date:new Date().getTime()}})

    },

    iscollspse() {
      this.$store.commit('collapsemenu')
    },
    handleclose(index) {
     
      if (this.$store.state.tab.tabsList.length > 0 && index <= this.$store.state.tab.tabsList.length - 1) {
        const i = this.$store.state.tab.tabsList.length - index - 1
        this.$store.state.tab.tabsList.splice(index + 1, i)
      }

    }
  },
  computed: {
    iscop() {
      return this.$store.state.tab.isCollapse ? '92vw' : ''
    },
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  watch: {
	'$route'(){
      this.$router.go(0);
		}
  }
}
</script>

<style>
.header {
  display: flex;
  /* align-items: center; */
  width: 85vw;
  height: 60px;
  /* line-height: 55px; */
  justify-content: space-between;
  padding-left: 30px;

}

.el-button {
  height: 30px;
}

h1 {
  color: black;
  margin-left: 15px;
  font-size: 17px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>